import React, { Component } from "react";

class App extends Component {
  state = {
    textValue: "",
    areaValue: "",
    selectValue: "coconut",
  };
  handleChange = (e, key) => {
    this.setState({
      [key]: e.target.value,
    });
  };
  handleClick = () => {
    console.log("textValue:", this.state.textValue);
    console.log("areaValue:", this.state.areaValue);
    console.log("selectValue:", this.state.selectValue);
  };
  render() {
    return (
      <>
        <h2>受控组件</h2>
        <input
          type="text"
          value={this.state.textValue}
          onChange={(e) => this.handleChange(e, "textValue")}
        />
        <hr />
        <textarea
          value={this.state.areaValue}
          onChange={(e) => this.handleChange(e, "areaValue")}
        ></textarea>
        <hr />
        <select
          value={this.state.selectValue}
          onChange={(e) => this.handleChange(e, "selectValue")}
        >
          <option value="grapefruit">葡萄柚</option>
          <option value="lime">酸橙</option>
          <option value="coconut">椰子</option>
          <option value="mango">芒果</option>
        </select>
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;
